<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Stats</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 600px;"></div>
    <script type="text/javascript">
        // 从 Flask 传递过来的数据，使用 JSON.parse 解析 JSON 字符串
        var data = JSON.parse('{{ data|tojson|safe }}');

        // 用于存储处理后的数据结构，格式为 {学期: {班级: {男: 人数, 女: 人数}}}
        var processedData = {};

        // 遍历数据进行整理
        data.forEach(function (item) {
            var semester = item.semester;
            var class_id = item.class_id;
            var gender = item.gender;
            var count = item.count;

            if (!processedData[semester]) {
                processedData[semester] = {};
            }
            if (!processedData[semester][class_id]) {
                processedData[semester][class_id] = { '男': 0, '女': 0 };
            }
            processedData[semester][class_id][gender] = count;
        });

        // 提取最终用于 ECharts 展示的数据格式
        var finalData = [];
        for (var semester in processedData) {
            for (var class_id in processedData[semester]) {
                var maleCount = processedData[semester][class_id]['男'];
                var femaleCount = processedData[semester][class_id]['女'];
                finalData.push({
                    name: '学期 ' + semester + '-' + class_id,
                    value: [maleCount, femaleCount]
                });
            }
        }

        // 基于准备好的 dom，初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 配置项
        var option = {
            title: {
                text: '不同学期各个班级的男女各自的人数'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['男', '女']
            },
            xAxis: {
                type: 'category',
                data: finalData.map(function (item) { return item.name; })
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '男',
                    type: 'bar',
                    stack: '总量',
                    data: finalData.map(function (item) { return item.value[0]; })
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '总量',
                    data: finalData.map(function (item) { return item.value[1]; })
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
